<template>
  <div>
    <MyHeader title="tabbar案例" bgc="pink"></MyHeader>
    <div class="main"> 
      <!-- 要切换的组件 -->
      <component :is="comName">  </component>
    </div>
    <MyTabBar :arr= "tabList"
    @changeCom="changeComFn"
    ></MyTabBar>
   
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue"
import MyTabBar from "./components/MyTabBar.vue"
import MyGoodsList from "./views/MyGoodsList.vue"
import MyGoodsSearch from "./views/MyGoodsSearch.vue"
import MyUserInfo from "./views/MyUserInfo.vue"
export default {
  components:{
MyHeader,
MyTabBar,
MyGoodsList,
MyGoodsSearch,
MyUserInfo
  },
data(){
  return{
    comName:"MyGoodsList", //默认显示组件
    tabList: [
    {
        iconText: "icon-shangpinliebiao",
        text: "商品列表",
        componentName: "MyGoodsList"
    },
    {
        iconText: "icon-sousuo",
        text: "商品搜索",
        componentName: "MyGoodsSearch"
    },
    {
        iconText: "icon-user",
        text: "我的信息",
        componentName: "MyUserInfo"
    }
]
  }
},
methods:{
changeComFn(name){
  // 切换到子组件传的组件
 this.comName=name
  }
}
}
</script>

<style scoped>
.main{
  padding-top: 45px;
  padding-bottom: 51px;
}
</style>